<!-- 用户编辑弹窗 -->
<template>
  <ele-modal width="720px"
             :visible="visible"
             :append-to-body="true"
             :close-on-click-modal="true"
             custom-class="ele-dialog-form"
             :title="'审核设置'"
             @update:visible="updateVisible">
    <el-form ref="form"
             :model="form"
             :rules="rules">
      <el-row :gutter="0">
        <el-col v-bind="styleResponsive ? { sm: 24 } : { span: 24 }">

          <el-form-item prop="radio"
                        label="当前状态:">

            <el-radio v-model="form.currentStatus"
                      label="2"
                      @change="currentStatusFn">审核通过</el-radio>
            <el-radio v-model="form.currentStatus"
                      label="3">驳回</el-radio>
          </el-form-item>
          <el-form-item prop="groundsForRejection"
                        label="驳回理由:"
                        style="color: red;">

            <el-input type="textarea"
                      placeholder="请输入驳回理由"
                      maxlength="255"
                      show-word-limit
                      :disabled="form.currentStatus=='2'?true:false"
                      resize="none"
                      v-model="form.groundsForRejection"></el-input>

          </el-form-item>
        </el-col>

      </el-row>

    </el-form>
    <div style="color: #ec636a;font-weight:700;margin-bottom: 10px;">明细记录:</div>
    <ele-pro-table :toolkit="[]"
                   ref="table"
                   :columns="childColumn"
                   :datasource="childUsers"
                   :selection.sync="childSelect"
                   :need-page="true"
                   :pageSize="5"
                   :pageSizes="[5,10,15,20,25,30,35,40,45,50]"
                   :hideOnSinglePage="false">
      <template v-slot:tradeType="{ row }">
        <el-tag :type="row.tradeType == 'NATIVE' ? 'success' : ''">
          {{ tradeTypeC(row.tradeType).status }}
        </el-tag>

      </template>
      <template v-slot:auditDate="{ row }">
        <div class="font-overflow">{{ row.auditDate?row.auditDate:'--'}}</div>
      </template>
      <template v-slot:totalBrokerage="{ row }">
        <div class="font-overflow">{{ row.totalBrokerage?row.totalBrokerage:'--'}}</div>
      </template>
      <template v-slot:transactionId="{ row }">
        <div class="font-overflow">{{ row.transactionId?row.transactionId:'--'}}</div>
      </template>
      <!-- 用户名列 -->
      <template v-slot:withdrawStatus="{ row }">
        <el-tag :type="row.withdrawStatus == '1' ? 'success' : ''">
          {{ applyForType(row.withdrawStatus) }}
        </el-tag>
      </template>

      <!-- 状态列 -->
      <template v-slot:status="{ row }">
        <el-switch :active-value="2"
                   :inactive-value="1"
                   v-model="row.status"
                   @change="editStatus(row)" />
      </template>

    </ele-pro-table>
    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary"
                 :loading="loading"
                 @click="save('form')">
        {{ form.currentStatus=='2'?'审核通过':'驳回' }}
      </el-button>
    </template>
  </ele-modal>
</template>

  <script>
import { examine } from '@/api/oem/index'
import { brokeragePageList } from '@/api/oem/index'

export default {

  props: {
    // 代理类型
    typeList: Array,
    // 进件id
    id: String,
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,

  },
  data () {
    const defaultForm = {

      currentStatus: '2',
      groundsForRejection: ''
    };
    return {
      defaultForm,
      // 表单数据
      form: { ...defaultForm },
      // 表单验证规则
      rules: {
        handlingCharge: [
          { type: 'number', message: '请输入数字' }
        ],


      },

      childSelect: [],
      //  当前明细id
      withdrawId: '',
      // 提交状态
      loading: false,
      // 表格列配置
      childColumn: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: 'left',
          sortable: true
        },
        {
          columnKey: 'index',
          type: 'index',
          label: '序号',
          width: 60,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'merchantName',
          //   prop: 'MerchantName',
          label: '商家名称',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 90,
          sortable: true,
          align: 'center',
        },

        {
          prop: 'payAmount',
          label: '订单金额',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110,
          sortable: true,
          align: 'center',
        },

        {
          prop: 'forecastBrokerage',
          label: '预估佣金',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110,
          sortable: true,
          align: 'center',
          slot: 'forecastBrokerage',
        },
        {
          prop: 'parentCode',
          label: 'OEM代理',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 90,
          sortable: true,
          align: 'center',
        },
        {
          prop: 'tradeType',
          label: '交易类型',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110,
          sortable: true,
          slot: 'tradeType',
          align: 'center',
        },
        {
          prop: 'oemCode',
          label: '下属代理',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 90,
          sortable: true,
          align: 'center',
        },
        {
          prop: 'transactionId',
          label: '订单编号',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 170,
          sortable: true,
          align: 'center',
          slot: 'transactionId',
        },

        {
          prop: 'createDate',
          label: '申请时间',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 100,
          sortable: true,
          align: 'center',
          formatter: (_row, _column, cellValue) => {
            return this.$util.toDateString(cellValue);
          }
        },

      ],
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    },
    applyForType () {
      return function (applyType) {
        // console.log(applyType)
        if (applyType == '1') {
          return '已结算';
        } else {
          return '待结算';
        }
      };
    },
    // 交易类型
    tradeTypeC () {
      return function (tradeType) {
        if (tradeType == 'NATIVE') {
          return {
            status: '线下支付',
            type: ''
          };
        } else {
          return {
            status: '线上支付',
            type: 'danger'
          };
        }
      };
    },
  },
  methods: {
    /* 保存编辑 */
    save (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) {
          return false;
        }
        this.loading = true;
        if (this.form.currentStatus == 3) {
          this.form.oemId = ''
          this.form.withdrawalAmount = ''
        }
        console.log(this.form)

        const res = await examine(this.form)
        console.log(res)
        if (res.code == 2000) {
          this.$message.success(res.msg)
        } else {
          this.$message(res.msg)
        }
        this.loading = false
        this.updateVisible(false)
        this.$emit('done');

      });
    },
    async childUsers ({ page, limit, where, order }) {
      console.log('123131');
      //   if (!where.deleted) where.deleted = 0;

      this.brokerageList = await brokeragePageList({ ...where, ...order, page, limit, withdrawId: this.withdrawId });
      return this.brokerageList
    },
    currentStatusFn (e) {
      console.log(e)
      this.form.groundsForRejection = ''
    },
    /* 更新visible */
    updateVisible (value) {
      this.$emit('update:visible', value);
    },
    /* 刷新表格 */
    reload (where) {
      this.$refs.table.reload();
    },
  },
  watch: {
    id: {
      handler: function (newVal) {
        console.log('Props changed: ', newVal);
        this.form.id = newVal;

      },
      immediate: true
    },
    data: {
      handler: function (newVal) {
        console.log('Props changed: ', newVal);
        this.form.id = newVal.id;
        this.form.currentStatus = newVal.currentStatus == '1' ? '2' : newVal.currentStatus;
        this.form.groundsForRejection = newVal.groundsForRejection
        this.withdrawId = newVal.id
        this.form.oemId = newVal.oemId
        this.form.withdrawalAmount = newVal.withdrawalAmount
        this.$nextTick(() => {
          this.reload()
        })
      },
      //   immediate: true
    }
  },

};
  </script>

  <style scoped lang="less">
/*隐藏input（type=number)右边的小箭头*/
/deep/.delInput input::-webkit-outer-spin-button,
/deep/.delInput input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/.delInput input[type='number'] {
  -moz-appearance: textfield;
}
/deep/ .el-textarea__inner {
  height: 168px;
}
/deep/ .el-form-item__label {
  color: #ec636a;
  font-weight: 700;
}
</style>
